import { Component, Vue, Prop } from 'vue-property-decorator'
import Styles from './styles.less'

export interface ICardOption {
  icon: string
  title: string
  description: string
  titleDesc?: string
}

@Component({})
export default class SelectCard extends Vue {
  @Prop({ default: () => {} }) private option!: ICardOption

  handleClick() {
    this.$emit('clicked', this.option)
  }

  render() {
    return (
      <div class={Styles.selectCard} onclick={this.handleClick}>
        <div class={Styles.icon}>
          <span class={['iconfont', this.option.icon]} />
        </div>
        <div class={Styles.textBox}>
          <p class={Styles.title}>
            {this.option.title}
            <span class={Styles.titleDesc}>{this.option.titleDesc}</span>
          </p>
          <p class={Styles.desc}>{this.option.description}</p>
        </div>
      </div>
    )
  }
}
